<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>套房管理页面</title>
    <link rel="stylesheet" type="text/css" href="../../static/admin/layui2/css/layui.css"/>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo"><a href="guanliyuan-main.html" style="color: #009688;font-size: 25px;">管理员主页面</a></div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a class="layui-icon layui-icon-user" style="color:#009688;font-size: 20px;text-align: center;" href="../yuangong/yuangong-login.html">员工登录</a></li>
            <li class="layui-nav-item"><a class="layui-icon layui-icon-logout" style="color: #ff3c00;font-size: 20px;text-align: center;" href="guanliyuan-login.html">退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-username" style="font-size: 24px; color: #009688; margin-right: 16px"></i> 信息管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="guanliyuan-mimaChange.html"><i class="layui-icon layui-icon-edit" style="font-size: 24px; color: #009688; margin-right: 16px"></i>修改密码</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-user" style="font-size: 24px; color: #009688; margin-right: 16px"></i>员工管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="guanliyuan-addyuangong.html"><i class="layui-icon layui-icon-add-circle" style="font-size: 24px; color: #009688; margin-right: 16px"></i>添加员工</a></dd>
                        <dd><a href="guanliyuan-deleteyuangong.html"><i class="layui-icon layui-icon-reduce-circle" style="font-size: 24px; color: #009688; margin-right: 16px"></i>删除员工</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-template-1" style="font-size: 24px; color: #009688; margin-right: 16px"></i>资源管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="guanliyuan-xiangmu.html"><i class="layui-icon layui-icon-subtraction" style="font-size: 24px; color: #009688; margin-right: 16px"></i>项目管理</a></dd>
                        <dd><a href="guanliyuan-loudong.html"><i class="layui-icon layui-icon-subtraction" style="font-size: 24px; color: #009688; margin-right: 16px"></i>楼栋管理</a></dd>
                        <dd><a href="guanliyuan-taofang.html" class="layui-this"><i class="layui-icon layui-icon-subtraction" style="font-size: 24px; color: #009688; margin-right: 16px"></i>套房管理</a></dd>
                        <dd><a href="guanliyuan-fangjian.html"><i class="layui-icon layui-icon-subtraction" style="font-size: 24px; color: #009688; margin-right: 16px"></i>房间管理</a></dd>
                        <dd><a href="guanliyuan-puwei.html"><i class="layui-icon layui-icon-subtraction" style="font-size: 24px; color: #009688; margin-right: 16px"></i>铺位管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-iteme">
                    <a href="guanliyuan-shoufeibiaozhun.html"><i class="layui-icon layui-icon-rmb" style="font-size: 24px; color: #009688; margin-right: 16px"></i>收费标准管理</a>
                </li>
                <li class="layui-nav-item layui-nav-iteme">
                    <a href="guanliyuan-shenpi.html"><i class="layui-icon layui-icon-survey" style="font-size: 24px; color: #009688; margin-right: 16px"></i>审批</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="demoTable" style="margin-top: 10px;margin-left: 10px">
            <div class="layui-inline" >
                <input class="layui-input" name="id" id="demoReload" autocomplete="off">
            </div>
            <button id="searchBtn" class="layui-btn" data-type="reload"><i class="layui-icon layui-icon-search"></i></button>
        </div>
        <!-- 内容主体区域 -->
        <div class="layui-anim layui-anim-scale">
            <script type="text/html" id="toolbar0">
                <a class="layui-btn layui-btn-primary layui-icon layui-icon-delete" style="font-size: 20px;" lay-event="add"></a>-->
            </script>
            <table class="layui-hide" id="demo" lay-filter="test"></table>
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="updata">修改</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="qiyong">启|禁</a>
            </script>
            <script type="text/html" id="table-qiyong">
                {{# if(d.qiyongzhuangtai== 0) { }}
                禁 用
                {{# } else{ }}
                启用
                {{# } }}
            </script>
            <script type="text/html" id="table-shiyong">
                {{# if(d.shiyongzhuangtai== 1) { }}
                闲置
                {{# } else if(d.shiyongzhuangtai== 2){ }}
                使用
                {{# } else { }}
                住满
                {{# } }}
            </script>
            <script type="text/html" id="table-huxing">
                {{# if(d.huxing== 'A') { }}
                A户型
                {{# } else if(d.huxing== 'B'){ }}
                B户型
                {{# } else { }}
                C户型
                {{# } }}
            </script>
        </div>
    </div>

    <div class="layui-footer layui-bg-green">

    </div>
</div>
<script src="../../static/admin/layui2/layui.js" type="text/javascript" charset="utf-8"></script>
<script>
    layui.use(['laydate', 'laypage', 'layer', 'table', 'jquery', 'element'], function() {
        var laydate = layui.laydate //日期
            , layer = layui.layer //弹层
            , table = layui.table //表格
            , $ =layui.jquery
            , element = layui.element //元素操作
        table.render({
            elem: '#demo'
            ,height: 650
            ,url: "/taofang/show" //数据接口
            ,title: '项目信息'
            ,toolbar: 'default' //自定义工具栏
            ,totalRow: true //开启合计行
            ,parseData:function(map) {//格式绑定后端传递过来的数据，我使用的是map对象，为了符合数据表格接受数据的样式，所以这么做的
                return {
                    "code":map["code"],
                    "msg":"",
                    "count":map["count"],
                    data:map["data"]//这个data才是表格所需要的数据，里面其实是一个list集合，存放的是n条数据记录。
                }
            }
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'xiangmubianma',title: '项目编码', width:100}
                ,{field: 'loudongbianma',title: '楼栋编码', width:100}
                ,{field: 'taofangbianma',title : "套房编码",width:100}
                ,{field: 'taofangmingcheng',title :"套房名称",width:100}
                ,{field: 'loudong',title: '楼栋', width:100}
                ,{field: 'quanlirenmingcheng', title: '权利人名称', width:130}
                ,{field: 'suoshuquyu', title: '所属区域', width:100}
                ,{field: 'shiyongzhuangtai', title: '使用状态', width: 100,templet: '#table-shiyong'}
                ,{field: 'qiyongzhuangtai', title: '启用状态', width: 100,templet: '#table-qiyong'}
                ,{field: 'fangchanwuyedizhi', title: '房产物业地址', width: 130}
                ,{field: 'fangchanwuyejiudizhi', title: '房产物业旧地址', width: 130}
                ,{field: 'loudongshiyongmianji', title: '楼栋使用面积', width:120}
                ,{field: 'louceng', title: '楼 层', width:120}
                ,{field: 'fangchanzhengbianhao', title: '房产证编号', width: 100}
                ,{field: 'gudingzichankahao', title: '固定资产卡号', width: 100}
                ,{field: 'shiyongmianji', title: '使用面积', width: 100}
                ,{field: 'gongtanmianji', title: '公摊面积', width: 100}
                ,{field: 'jianzhumianji', title: '建筑面积', width: 100}
                ,{field: 'shijishiyongmianji', title: '实际使用面积', width: 100}
                ,{field: 'huxing', title: '户型', width: 100,templet: '#table-huxing'}
                ,{field: 'fangjianshu', title: '房间数', width: 100}
                ,{field: 'beizhu', title: '备注', width: 130}
                ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
            ]],
        });

        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
                case 'add':
                    layer.open({
                        type: 2
                        ,
                        title: "添加信息"
                        ,
                        skin: 'layui-layer-molv'
                        ,
                        area: ['600px', '700px']
                        ,
                        id: 'LAY-1' //设定一个id，防止重复弹出
                        ,
                        btnAlign: 'd'
                        ,
                        moveType: 0 //拖拽模式，0或者1
                        ,
                        fixed: false,
                        content: "guanliyuan-taofangadd.html",
                        shadeClose: true,
                    })
                    break;
                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                    }
                    break;
                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        layer.msg('删除');
                    }
                    break;
            };
        });

        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'updata'){
                layer.open({
                    type: 2
                    ,
                    title: "修改信息"
                    ,
                    skin :'layui-layer-molv'
                    ,
                    area: ['600px','700px']
                    ,
                    id: 'LAY-2' //设定一个id，防止重复弹出
                    ,
                    btnAlign: 'd'
                    ,
                    moveType: 0 //拖拽模式，0或者1
                    ,
                    fixed: false,
                    content: "guanliyuan-taofangupdate.html",
                    shadeClose: true,
                    success: function(layero, index) {
                        var body = layer.getChildFrame('body', index);//获取iframe页的DOM
                        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象
                        body.find('#xiangmubianma').val(data.xiangmubianma);
                        body.find('#loudongbianma').val(data.loudongbianma);
                        body.find('#taofangbianma').val(data.taofangbianma);
                        body.find('#taofangmingcheng').val(data.taofangmingcheng);
                        body.find('#loudong').val(data.loudong);
                        body.find('#quanlirenmingcheng').val(data.quanlirenmingcheng);
                        body.find('#suoshuquyu').val(data.suoshuquyu);
                        body.find("input[name=shiyongzhuangtai][value=1]").attr("checked",data.shiyongzhuangtai == 1 ? true : false);
                        body.find("input[name=shiyongzhuangtai][value=2]").attr("checked",data.shiyongzhuangtai == 2 ? true : false);
                        body.find("input[name=shiyongzhuangtai][value=3]").attr("checked",data.shiyongzhuangtai == 3 ? true : false);
                        body.find("input[name=qiyongzhuangtai][value=0]").attr("checked",data.qiyongzhuangtai == 0 ? true : false);
                        body.find("input[name=qiyongzhuangtai][value=1]").attr("checked",data.qiyongzhuangtai == 1 ? true : false);
                        body.find('#fangchanwuyedizhi').val(data.fangchanwuyedizhi);
                        body.find('#fangchanwuyejiudizhi').val(data.fangchanwuyejiudizhi);
                        body.find('#loudongshiyongmianji').val(data.loudongshiyongmianji);
                        body.find('#louceng').val(data.louceng);
                        body.find('#fangchanzhengbianhao').val(data.fangchanzhengbianhao);
                        body.find('#gudingzichankahao').val(data.gudingzichankahao);
                        body.find('#shiyongmianji').val(data.shiyongmianji);
                        body.find('#gongtanmianji').val(data.gongtanmianji);
                        body.find('#jianzhumianji').val(data.jianzhumianji);
                        body.find('#shijishiyongmianji').val(data.shijishiyongmianji);
                        body.find("input[name=huxing][value='A']").attr("checked",data.huxing == 'A' ? true : false);
                        body.find("input[name=huxing][value='B']").attr("checked",data.huxing == 'B' ? true : false);
                        body.find("input[name=huxing][value='C']").attr("checked",data.huxing == 'C' ? true : false);
                        body.find('#fangjianshu').val(data.fangjianshu);
                        body.find('#beizhu').val(data.beizhu);
                    },
                })
            } else if(layEvent === 'del'){
                layer.confirm('真的删除行么', function(index){
                    //向服务端发送删除指令
                    $.ajax({
                        type:"POST",
                        url:"/taofang/delete",
                        data:{'taofangbianma':data.taofangbianma},
                        success:function (res) {
                            if (res.flag){
                                layer.msg('删除成功')
                                obj.del(); //删除对应行（tr）的DOM结构
                                layer.close(index);
                            }else {
                                layer.msg('删除失败' )
                            }
                        }
                    })
                });
            }else if(layEvent === "qiyong"){
                $.ajax({
                    type:"POST",
                    url:"/taofang/qiyong",
                    data:{'taofangbianma':data.taofangbianma,'qiyongzhuangtai':data.qiyongzhuangtai},
                    success:function (res) {
                        if (res.flag){
                            layer.msg('修改成功')
                            setTimeout(function () {
                                location.reload()
                            },1000)
                        }else {
                            layer.msg('修改失败' )
                        }
                    }
                })
            }
        });

        $(document).on('click','#searchBtn',function (data) {
            //获取文本框对象
            var search = $('#demoReload')
            //调用数据表格的重载
            table.reload('demo',{
                url:"/taofang/select",
                where:{
                    searchResult:search.val()//前端向后端传输的值
                },
                page:{
                    curr:1
                }
            });
        });

    });
</script>
</body>

</html>
</html>